<template>
  <div class="app-container">
    <div style="display: flex">
      <div style="display: flex;flex: 1;flex-direction: column">
        <el-form label-width="120px">
          <el-form-item label="借至">
            <el-radio-group v-model="toType" @change="handleRadioChange">
              <el-radio-button label="用户"></el-radio-button>
              <el-radio-button label="资产"></el-radio-button>
              <el-radio-button label="位置"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="toType === '用户'" label="选择用户" prop="assigned_to">
            <el-select v-model="returnData.assigned_to" placeholder="请选择用户" clearable size="small">
              <el-option
                v-for="dict in roleList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="toType === '资产'" label="选择资产" prop="assigned_asset">
            <el-select v-model="returnData.assigned_asset" placeholder="请选择资产" clearable size="small">
              <el-option
                v-for="dict in assetList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="toType === '位置'" label="选择位置" prop="assigned_asset">
            <ChooseLocation @commitLocationMethod="commitLocationMethod"></ChooseLocation>
          </el-form-item>
          <el-form-item label="借出日期" prop="checkout_date">
            <el-date-picker
              v-model="returnData.checkout_date"
              clearable
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择借出日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="预计归还日期" prop="expected_checkin_date">
            <el-date-picker
              v-model="returnData.expected_checkin_date"
              clearable
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择预计归还日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="借出备注" prop="checkout_notes">
            <el-input v-model="returnData.checkout_notes" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="资产" prop="assets">
            <el-select v-model="returnData.assets" placeholder="请选择资产" clearable size="small" multiple>
              <el-option
                v-for="dict in assetListCan"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="borrowClick()">借出</el-button>
        </div>
      </div>
      <div style="flex: 1;background: #fff"></div>
    </div>
  </div>
</template>

<script>

import { listUser } from "@/api/vadmin/permission/user";
import { listAsset } from "@/api/vadmin/assets/assets";
import ChooseLocation from "@/views/components/ChooseLocation";
import { batchcheckout } from "@/api/vadmin/basic/base";

export default {
  name: "Maintain",
  components: { ChooseLocation },
  data() {
    return {
      assetList: [],
      assetListCan: [],
      roleList: [],
      toType: "用户",
      returnData: {
        assigned_to: null,
        checkout_date: null,
        expected_checkin_date: null,
        checkout_notes: "",
        assets: null
      }
    };
  },
  created() {
  },
  mounted() {
    listUser().then(response => {
      this.roleList = response.data.results;
    });
    listAsset({ deleted: false }).then(response => {
      this.assetList = response.data.results;
      this.assetListCan = this.assetList.filter(item => {
        if (!item.assigned_to_id && !item.assigned_to_name && item.status === "deployable") {
          return item;
        }
      });
    });
  },
  methods: {
    commitLocationMethod(val) {
      this.returnData.assigned_to = val;
    },
    handleRadioChange(val) {
      this.returnData.assigned_to = "";
    },
    borrowClick() {
      let assignedType = "";
      if (this.toType === "用户") {
        assignedType = "user";
      } else if (this.toType === "资产") {
        assignedType = "asset";
      } else {
        assignedType = "location";
      }
      var rq = { asset_type: "asset", checkout_ids: this.returnData.assets, assigned_to_id: this.returnData.assigned_to, assigned_type: assignedType, check_datetime: this.returnData.checkout_date + " 00:00:00", expected_checkin_date: this.returnData.expected_checkin_date, notes: this.returnData.checkout_notes };
      batchcheckout(rq).then(res => {
        this.$message({
          message: "资产借出成功",
          type: "success"
        });
        // 借出成功跳转到资产
        this.$router.push({ path: "/assets/assets", query: {}});
      });
    }
  }
};
</script>
<style>
</style>
